<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover"
                 class="mgb20"
                 style="height: 350px; margin-bottom: 20px">
          <div class="user-info">
            <img :src="userData.avatar"
                 class="user-avator"
                 alt
                 @click="goPerson()" />
            <div class="user-info-cont">
              <div class="user-info-name">{{ userData.account }}</div>
              <br>
              <div>{{ userData.department }}</div>
              <div>{{ userData.slogan }}</div>
            </div>
          </div>
          <div class="user-info-list">
            我的电话：
            <span>{{ userData.telphone }}</span>
          </div>
          <div class="user-info-list">
            我的邮箱：
            <span>{{ userData.email }}</span>
          </div>
        </el-card>
        <el-card shadow="hover"
                 style="height: 350px; margin-bottom: 20px">
          <div slot="header"
               class="clearfix">
            <h3>自我成长</h3>
          </div>
          <p style="margin-bottom: 10px">追求卓越</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.zuoyue"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">抗压能力</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.kangya"
                       status="success"
                       style="margin-bottom: 10px"></el-progress>
          <p style="margin-bottom: 10px">学习能力</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.xuexi"
                       status="warning"
                       style="margin-bottom: 10px"></el-progress>
          <p style="margin-bottom: 10px">积极主动</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.jiji"
                       status="exception"
                       style="margin-bottom: 10px"></el-progress>
        </el-card>
        <el-card shadow="hover"
                 style="height: 350px; margin-bottom: 20px">
          <div slot="header"
               class="clearfix">
            <h3>人际交往</h3>
          </div>
          <p style="margin-bottom: 10px">沟通能力</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.goutong"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">团队合作</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.hezuo"
                       status="success"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">协作能力</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.xiezuo"
                       status="warning"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">影响说服</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.yingxiang"
                       status="exception"
                       style="margin-bottom: 10px">
          </el-progress>
        </el-card>
        <el-card shadow="hover"
                 style="height: 350px">
          <div slot="header"
               class="clearfix">
            <h3>决策执行</h3>
          </div>
          <p style="margin-bottom: 10px">决策判断</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.juece"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">高效执行</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.gaoxiao"
                       status="success"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">规划安排</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.guihua"
                       status="warning"
                       style="margin-bottom: 10px">
          </el-progress>
          <p style="margin-bottom: 10px">认真负责</p>
          <el-progress :text-inside="true"
                       :stroke-width="20"
                       :percentage="skill.renzhen"
                       status="exception"
                       style="margin-bottom: 10px">
          </el-progress>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20"
                class="mgb20">
          <el-col :span="12">
            <el-card shadow="hover"
                     :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-lx-people grid-con-icon"></i>
                <div class="grid-cont-right"
                     @click="goTraining()">
                  <div class="grid-num">{{ trainingList.length }}门</div>
                  <p style="color: rgb(45, 140, 240)">我的培训</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2" @click="goTraining()">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ courseList.length }}门</div>
                                    <p style="color: rgb(100, 213, 114)">我的课程</p>
                                </div>
                            </div>
                        </el-card>
                    </el-col> -->
          <el-col :span="12">
            <el-card shadow="hover"
                     :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-lx-goods grid-con-icon"></i>
                <div class="grid-cont-right"
                     @click="goExam()">
                  <div class="grid-num">{{examNum}}门</div>
                  <div>我的考试</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-card shadow="hover"
                 style="height: 600px; margin-bottom: 20px">
          <div slot="header"
               class="clearfix">
            <span>进行中的培训</span>
          </div>
          <el-carousel :interval="4000"
                       type="card"
                       height="200px">
            <el-carousel-item v-for="item in trainingList"
                              :key="item.id"
                              :style="bg(item)">
              <div style="height:100%;width:100%"
                   @click="goTrainingCourse(item.id)"></div>
            </el-carousel-item>
          </el-carousel>

          <div class="clearfix">
            <span>学习中的课程</span>
          </div>
          <el-carousel :interval="4000"
                       type="card"
                       height="200px">
            <el-carousel-item v-for="item in courseList"
                              :key="item.id"
                              :style="bg(item)">
              <div style="height:100%;width:100%"
                   @click="goStudyCourse(item.id)">
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <el-card shadow="hover"
                 style="height: 720px">
          <div slot="header"
               class="clearfix">
            <span>培训中心</span>
          </div>
          <div>
            <el-row>
              <el-col :span="6"
                      v-for="item in tableData"
                      :key="item.id">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="item.cover"
                       class="image" />
                  <div style="padding: 14px">
                    <span>{{ item.trainingname }}</span>
                    <div class="bottom clearfix">
                      <el-button type="text"
                                 class="button"
                                 @click="goTrainingRegistration(item.id)">报名</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div class="pagination">
              <Pagination v-bind:child-msg="pageparm"
                          @callFather="callFather"></Pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 报名弹出框 -->
    <el-dialog title="培训报名"
               :visible.sync="editVisible"
               width="30%">
      <el-form ref="form"
               v-for="item in form"
               :key="item"
               label-width="70px">
        <el-form-item label="项目名称">
          {{ item.trainingname }}
        </el-form-item>
        <el-form-item label="项目时间">
          {{ item.establishtime }}
        </el-form-item>
        <el-form-item label="项目状态">
          {{ item.status }}
        </el-form-item>
        <el-form-item label="负责人">
          {{ item.establish }}
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="apply()">报 名</el-button>
      </span>
    </el-dialog>
  </div>
</template>
                

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import Pagination from '../../components/common/Pagination.vue';
export default {
    data() {
        return {
            tableData: [],
            trainingList: [],
            courseList: [],
            trainDate: [],
            userData: {},
            user: {
                id: -1
            },
            training: [],
            skill: {},
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 8,
                total: 5
            },
            examNum: 0,
            formInline: {
                page: 1,
                limit: 8
            },
            query: {
                trainingname: '',
                establishtime: '',
                status: '',
                establish: '',
                id: ''
            },
            editVisible: false,
            form: []
        };
    },

    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.user.id = localStorage.getItem('id');
        this.getData(this.formInline);
        this.getExamNum();
    },

    methods: {
        getExamNum() {
            this.$axios
                .get('/api/exam/findAll/' + this.user.id)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.examNum = res.data.data.length;
                    }
                })
                .catch();
        },
        unique(arr) {
            // 根据唯一标识orderId来对数组进行过滤
            const res = new Map(); //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
            return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
        },

        getData(parameter) {
            this.$axios
                .post('/api/trainings/findTrainingByUserId/', this.user)
                .then((res) => {
                    this.trainingList = res.data.data;
                    for (let i = 0; i < this.trainingList.length; i++) {
                        this.training = this.trainingList[i];
                        this.$axios
                            .post('/api/trainings/findCrouseBytrainingId/', this.training)
                            .then((resp) => {
                                this.courseList = this.courseList.concat(resp.data.data);
                                let hashCourse = this.unique(this.courseList);
                                this.courseList = hashCourse;
                            })
                            .catch((err) => {});
                    }
                })
                .catch((err) => {});

            this.$axios
                .post('/api/skill/findSkill/' + this.user.id)
                .then((res) => {
                    this.skill = res.data.data;
                })
                .catch((err) => {});
            this.$axios
                .post('/api/users/findUser/' + this.user.id)
                .then((res) => {
                    this.userData = res.data.data;
                })
                .catch((err) => {});

            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;

            this.$axios
                .post(
                    '/api/trainings/findNotApplyTrainingByUserId/' +
                        this.pageparm.currentPage +
                        '/' +
                        this.pageparm.pageSize +
                        '/' +
                        this.user.id
                )
                .then((res) => {
                    this.tableData = res.data.data.list;
                    this.pageparm.total = res.data.data.total;
                })
                .catch((err) => {});
        },
        // 分页插件事件
        callFather(parm) {
            //子传父 当前页和每页大小
            this.formInline.page = parm.currentPage;
            this.formInline.limit = parm.pageSize;
            this.getData(this.formInline);
        },

        bg(item) {
            return `background:url(${item.cover});
                    background-size:cover`;
        },

        goTraining() {
            this.$router.push({ path: '/mytraining' });
        },
        goExam() {
            this.$router.push({ path: '/exam' });
        },
        goTrainingRegistration(id) {
            this.editVisible = true;
            this.$axios
                .post('/api/trainings/findTraining/1/1', { id: id })
                .then((res) => {
                    this.form = res.data.data.list;
                })
                .catch((err) => {});
        },

        apply() {
            for (let i = 0; i < this.form.length; i++) {
                this.$axios
                    .post('/api/trainings/apply/' + this.user.id + '/' + this.form[i].id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '报名成功！'
                            });
                            this.editVisible = false;
                            this.getData(this.formInline);
                        } else {
                            this.$message({
                                type: 'info',
                                message: '已报名！'
                            });
                            this.editVisible = false;
                        }
                    })
                    .catch((err) => {});
            }
        },

        goTrainingCourse(id) {
            this.$axios
                .post('/api/trainings/findCrouseBytrainingId/', { id: id })
                .then((res) => {
                    localStorage.setItem('trainingid', id);
                    localStorage.setItem('courseid', res.data.data[0].id);
                    this.$router.push({ path: '/studyCourse' });
                })
                .catch((err) => {});
        },

        goStudyCourse(id) {
            this.$axios
                .post('/api/trainings/findTrainingIdByCrouseId/' + id)
                .then((res) => {
                    localStorage.setItem('trainingid', res.data.data);
                    localStorage.setItem('courseid', id);
                    this.$router.push({ path: '/studyCourse' });
                })
                .catch((err) => {});
        },

        goPerson() {
            this.$router.push({ path: '/person' });
        }
    }
};
</script>


<style scoped>
.trainingCard {
    width: 200px;
    height: 260px;
    margin-bottom: 20px;
    margin-left: 40px !important;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    height: 134px;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
.el-carousel__item h1 {
    color: white;
    line-height: 200px;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
